<template>
    <div class="main">

        <img src="../assets/doctor/login_logo.png" />
        <div class="top" @click="gotoupdate"><h3>录入儿童体检结果信息</h3></div>
       <table class="table">
        <th>指标结果id</th>
        <th>指标id</th>
        <th>计划执行id</th>
        <th>儿童id</th>
        <th>检查结果</th>
        <th>检查时间</th>
        <th>描述</th>
        <th>操作</th>
        <tr v-for="medical in medicals" :key="medical.quotaresultid">
          <td>{{medical.quotaresultid}}</td>
          <td>{{medical.quotaid}}</td>
          <td>{{medical.planexecuteid}}</td>
          <td>{{medical.childid}}</td>
          <td>{{medical.checkesult}}</td>
          <td>{{medical.checkdate}}</td>
          <td>{{medical.describe}}</td>
          <td>
            <button class="buttons" @click="handleDelete(medical.childid)">删除</button>
            <!-- <button class="buttons" @click="handleUpdate(medical.childid)">修改</button> -->
          </td>

        </tr>

       </table>

    </div>
</template>

<script>
export default{
  name: 'medical-skill',
  data () {
    return {
      medicals: [],
      quotaresultid: '',
      childid: ''
    }
  },
  mounted () {
    var _this = this
    this.$http.get('getAll').then(function (resp) {
      _this.medicals = resp.data
    }).catch(function (resp) {
      console.log(resp)
    })
  },
  methods: {
    handleDelete (childid) {
      console.log(childid)
      this.$http.delete('deletqutoa', {params: {childid: childid}}).then(resp => {
        if (resp.data) {
          for (let i = 0; i < this.medicals.length; i++) {
            if (this.medicals[i].childid === childid) {
              console.log(childid)
              this.medicals.splice(i, 1)
              break
            }
          }
        } else {

        }
      }).catch(resp => {})
    },
    gotoupdate () {
      this.$router.push('/updateMedicalskill')
    }
  }

}
</script>

<style>
  .main {
    width: 100%;
    height: 720px;
    background-color:#D9FFFF;
    align-items: center;

  }
   h1{
     color: white;
     padding-top: 50px;
   }
.table{
  margin-top: 20px;
 border: solid #CCCCCC;
}
th{
  border: solid #CCCCCC;
}
.buttons{
  background-color:#AFEEEE;
  color: white;
  width: 50px;
  height: 30px;
  border-radius: 20px;
  font-size:medium;
}
.top{
  margin-left: 1225px;

}
.top h3{
  color: #2E8B57;
  text-decoration: underline
}
.top h3:hover{
  text-decoration: underline #8FBC8F;

}

</style>
